<template>
  <div class="form-box" style="overflow: hidden">
    <!-- 列表页面  模糊查询使用  -->
    <el-form
      ref="form"
      :inline="true"
      size="small"
      :model="formData"
      label-position="left"
      class="demo-form-inline"
    >
      <el-form-item
        v-for="(field, index) in config.fieldsConfig"
        v-if="field.isShow ? !field.isShow : true"
        :key="index"
        :label="field.label ? `${field.label}：` : null"
        :label-width="field.labelwidth ? field.labelwidth : '100px'"
        :class="field.labelLine ? 'block' : null"
      >
        <component
          :is="field.fieldType"
          :key="index"
          :ref="field.name"
          :label="field.label"
          :value="formData[field.name]"
          :form-data="formData"
          :multiple="field.multiple"
          :picker-options="field.pickerOptions"
          :format="field.format"
          :date="field.date"
          :type="field.type"
          :area-length="field.areaLength"
          v-bind="field"
          :is-childs="field.isChilds"
          :child-type-name="field.childTypeName"
          :options="field.options"
          :optionsurl="field.optionsurl"
          :disabled="field.disabled"
          @input="updateForm"
          @change="changeForm"
        />
      </el-form-item>
      <slot v-if="config['buttons']" name="buttons">
        <div class="fr" style="margin-bottom: 10px;">
          <div style="display: inline-block;">
            <slot v-for="item in slotleftList" :name="item" />
          </div>
          <el-button
            size="small"
            type="primary"
            :icon="onSubmitIcon"
            @click="submit"
            >{{ onSubmitText }}</el-button
          >
          <el-button
            size="small"
            type="default"
            icon="el-icon-refresh-left"
            @click="reset"
            >{{ onResetText }}</el-button
          >
          <slot v-for="item in slotList" :name="item" />
        </div>
      </slot>
    </el-form>
  </div>
</template>
<script>
import SelectList from "./basicComponent/SelectList";
import TextInput from "./basicComponent/TextInput";
import Uploads from "./basicComponent/Uploads";
import NumberInput from "./basicComponent/NumberInput";
import SelectType from "./basicComponent/SelectType";
import SelectRoom from "./basicComponent/SelectRoom";
import DateTimePicker from "./basicComponent/DateTimePicker";
import SelectDate from "./basicComponent/SelectDate";

export default {
  name: "FormGenerator",
  components: {
    SelectList,
    NumberInput,
    TextInput,
    Uploads,
    SelectType,
    SelectRoom,
    SelectDate,
    DateTimePicker,
  },
  props: {
    config: {
      type: Object,
      default: () => {},
    },
    value: {
      type: Object,
      default: () => {},
    },
    slotleftList: {
      type: Array,
      default: () => [],
    },
    slotList: {
      type: Array,
      default: () => [],
    },
    cache: {
      type: Boolean,
      default: true,
    },
  },
  //  ['config', 'value']
  data() {
    return {
      formData: this.value,
      onSubmitText: this.config.buttons
        ? this.config.buttons.onSubmitText || "查询"
        : "",
      onResetText: this.config.buttons
        ? this.config.buttons.onResetText || "重置"
        : "",
      onSubmitIcon: this.config.buttons
        ? this.config.buttons.icon || "el-icon-search"
        : "",
    };
  },
  watch: {
    value(val) {
      // console.log(val)
      this.formData = this.value;
    },
  },
  created() {
    this.formData = this.value;
  },
  methods: {
    isShowAction(field) {
      // if(field.isShow)?
      // field.isShow ? field.isShow : true
    },
    changeForm(fieldName, value) {
      this.formData[fieldName] = value;
      this.$emit("change");
    },
    updateForm(fieldName, value) {
      this.formData[fieldName] = value;
    },
    submit() {
      this.$emit("submit");
    },
    reset() {
      for (var name in this.formData) {
        if (typeof this.formData[name] === "string") {
          this.formData[name] = null;
        } else {
          this.formData[name] = null;
        }
      }
      console.log(this.formData);
      this.$emit("reset");
    },
  },
};
</script>
<style lang="less" scoped>
.form-box /deep/ .block {
  display: block;
}
::v-deep .el-form-item__content {
  max-width: 85%;
}
::v-deep .el-form--inline .el-form-item {
  margin-bottom: 0.08rem !important;
}
.form-box {
  text-align: left;
}
.form-box .fr {
  text-align: right;
}
</style>
